<template>
  <div>
    <el-tabs :tab-position="tabPosition" style="height: 500px;">
      <el-tab-pane label="前台首页轮播图管理">
        <el-tabs v-model="activeName">
          <el-tab-pane label="轮播效果图" name="first">
            <el-carousel :interval="4000" type="card" height="300px">
              <el-carousel-item v-for="img in carouselNormal" :key="img.ca_id" v-show="img.ca_status=='启用'">
                <!-- <h3 >{{ item }}</h3> -->
                <img class="medium" :src="imgHead+img.ca_img" alt="">
              </el-carousel-item>
            </el-carousel>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNormal">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="轮播数据" name="second">
            <!-- 主页表格 -->
            <el-table
              :data="carousel"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="ca_id"
                label="编号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="p_name"
                label="产品名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="ca_status"
                label="状态">
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="添加轮播图" name="third">
            <form action="http://localhost:3000/after/carousel" enctype="multipart/form-data" method="post">
              <div>
                选择要上传的商品：
                <select name="ca_p_id" required>
                  <option v-for="p in products" :key="p.p_id" :value="p.p_id" v-text="p.p_name"></option>
                </select>
              </div>
              <div style="margin:10px 0;">
                选择要上传的图片：
                <input type="file" name="pic" required>
              </div>
              <div>
                <input type="submit" value="提交" class="btn btn-primary">
              </div>
            </form>
          </el-tab-pane>
          <el-tab-pane label="轮播图管理" name="fourth">
            <el-table
              :data="carousel"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="ca_id"
                label="编号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="p_name"
                label="产品名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="ca_status"
                label="状态"
                width="180">
              </el-table-column>
              <el-table-column
                label="操作"
                width="150">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="primary" size="small">禁用/启用</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="订单管理">
        <el-tabs v-model="activeNamec" @tab-click="handleClickc">
          <el-tab-pane label="待处理订单" name="first">
            <HandleOrder></HandleOrder>
          </el-tab-pane>
          <el-tab-pane label="发货操作" name="second">
            <SendProduct></SendProduct>
          </el-tab-pane>
          <el-tab-pane label="已发货订单" name="third">
            <SendSuccessOrder></SendSuccessOrder>
          </el-tab-pane>
          <el-tab-pane label="已完成订单" name="fourth">
            <SuccessOrdered></SuccessOrdered>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="权限管理">权限管理</el-tab-pane>
      <el-tab-pane label="聊天の地方">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import HandleOrder from './order/HandleOrder.vue'
import SendProduct from './order/SendProduct.vue'
import SendSuccessOrder from './order/SendSuccessOrder.vue'
import SuccessOrdered from './order/SuccessOrdered.vue'
export default {
  components:{
    HandleOrder,
    SendProduct,
    SendSuccessOrder,
    SuccessOrdered
  },
    data() {
      return {
        // tab选项卡
        tabPosition: 'left',
        activeName: 'first',
        activeNamec: 'first',
        // 初始化数据
        carousel:[],
        carouselNormal:[],
        currentsize:1,
        pagesize:3,
        // 分页
        currentPage: 1,
        total:0,
        totalNormal:0,
        pagesize:3,
        // 轮播图
        imgHead:"http://localhost:3000/images/",
        // 商品
        products:[]
      }
    },
    methods:{
      init(){
        // 初始化主页图
        let obj = {
          currentsize:this.currentsize, 
          pagesize:this.pagesize
        }
        this.$ajax({
          url:"after/carousel",
          method:"get",
          params:obj
        }).then(resp=>{
          if(resp.data.status == 1){
            this.carousel = resp.data.message
            this.total = resp.data.totalPage
          }
        })
        // 禁用之后效果图
        this.$ajax({
          url:"after/carouselNormal",
          method:"get",
          params:obj
        }).then(resp=>{
          if(resp.data.status == 1){
            this.carouselNormal = resp.data.message
            this.totalNormal = resp.data.totalPage
          }
        })
        // 初始化商品
        this.$ajax({
          url:"after/productsimg",
          method:"get"
        }).then(resp=>{
          if(resp.data.status == 1){
            this.products = resp.data.message
          }
        })
      },
      // 数据表格
      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 1) {
          return 'warning-row';
        } else{
          return 'success-row';
        }
      },
      handleClick(row) {
        console.log(row);
        let status = 0;
        if(row.ca_status=="正常"){
          status=0
        }else{
          status=1
        }
        let obj = {
          id:row.ca_id, 
          status
        }
        this.$ajax({
          url:"after/carousel",
          method:"delete",
          params:obj
        }).then(resp=>{
          if(resp.data.status === 1){
            if(row.ca_status=="正常"){
              this.$message.error('已禁用');
            }else{
              this.$message({
                message: '启用成功',
                type: 'success'
              });
            }
            this.init();
          }
        })
      },
      handleClickc(tab, event) {
        console.log(tab, event);
      },
      // 分页
      handleSizeChange(val) {
        this.pagesize = val
        this.init();
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.init();
        // console.log(`当前页: ${val}`);
      }
    },
    created(){
      this.init();
    }
}
</script>

<style scoped>
/* 数据表格 */
.el-table .warning-row {
    background: oldlace;
  }
.el-table .success-row {
  background: #f0f9eb;
}
/* 轮播图 */
.el-carousel__item img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
  /* 提交按钮 */
.btn{
    width: 100px;
    height: 30px;
    border: none;
    background-color: green;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    color: white;
    border-radius: 30px;
    cursor: pointer;
}
.btn:focus{
    outline: none;
}
.btn-primary{
    background-color: blue;
}
</style>